<template>
    <div class="header-container">
        <div class="left-header">
            <el-button icon="el-icon-menu" size="mini"></el-button>
            <span class="text">首页</span>
        </div>
        <div class="right-header">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="user" src="@/assets/logo.png" alt="logo" />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </div>
    </div>
</template>

<script>
export default {
    data() {

    }
}
</script>

<style lang="less" scoped>
.header-container {
    background-color: #333;
    height: 60px;
    //调整header里面的组件
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    // 设置“首页”字体的格式
    .text {
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
    }

    // 头像
    .right-header {
        .user {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }
}


.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>